import React from 'react'
import { Button, Pagination, Popconfirm, Table } from 'antd'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import moment from 'moment'
import { Page } from 'components'
import styles from './ProcessType.css'
import { PAGE_SIZE } from '../../constants'
import ProcessTypeModal from './ProcessTypeModal'
import UpdateProcessTypeModal from './UpdateProcessTypeModal'
import * as cookie from '../../services/cookie'

// import ProcessModal from './ProcssModal';

function ProcessType ({ dispatch, list: dataSource, loading, total, page: current }) {
  const columns = [
    {
      title: '系统编号',
      dataIndex: 'systemCode',
      key: 'systemCode',
    }, {
      title: '部门',
      dataIndex: 'unit',
      key: 'unit',
    }, {
      title: '系统业务编号',
      dataIndex: 'bizCode',
      key: 'bizCode',
    }, {
      title: '业务名称',
      dataIndex: 'bizName',
      key: 'bizName',
    }, {
      title: '主题',
      dataIndex: 'subject',
      key: 'subject',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: (record) => {
        if (record === null) {
          return ''
        }
        return moment(record)
          .format('YYYY-MM-DD HH:mm:ss')
      },
    }, {
      title: '创建人',
      dataIndex: 'createUser',
      key: 'createUser',
    }, {
      title: '操作',
      key: 'operation',
      render: (text, record) => (
        <span className={styles.operation}>
          <UpdateProcessTypeModal record={record} onOk={editHandler.bind(null, record.id)} dispatch={dispatch}>
            <Button size={'small'} type={'primary'}>编辑</Button>
          </UpdateProcessTypeModal>
          <Popconfirm title="确认删除?" onConfirm={deleteHandler.bind(null, record.id)}>
            <Button type="danger" size={'small'}> 删除</Button>
          </Popconfirm>
        </span>
      ),
    },
  ]

  function deleteHandler (id) {
    dispatch({
      type: 'processtype/remove',
      payload: id,
    })
  }

  function pageChangeHandler (page) {
    dispatch(routerRedux.push({
      pathname: '/processtype',
      query: { page },
    }))
  }

  function editHandler (id, values) {
    dispatch({
      type: 'processtype/patch',
      payload: { id, values },
    })
  }

  function createHandler (values) {
    const cookieUser = cookie.getCookie('token')
    const user = JSON.parse(cookieUser)
    values.createUser = user.account
    dispatch({
      type: 'processtype/create',
      payload: values,
    })
  }

  function onRowClick (record) {
  }

  return (
    <div>
      <div className={styles.create}>
        <ProcessTypeModal record={{}} onOk={createHandler} dispatch={dispatch}>
          <Button icon="download" size={'large'} type="primary">创建业务类型</Button>
        </ProcessTypeModal>
      </div>
      <Table
        columns={columns}
        dataSource={dataSource.list}
        loading={loading}
        rowKey={record => record.id}
        pagination={false}
        size="small"
        bordered
      />
      <Pagination
        className="ant-table-pagination"
        total={dataSource.total}
        current={dataSource.pageNum}
        pageSize={PAGE_SIZE}
        onChange={pageChangeHandler}
        showQuickJumper
      />
    </div>
  )
}

function mapStateToProps (state) {
  const { list, total, pages } = state.processtype
  return {
    loading: state.loading.models.processtype,
    list,
    total,
    pages,
  }
}

export default connect(mapStateToProps)(ProcessType)
